<template>
  <div class="music-hub-tabs">
    <el-affix target=".music-hub" :offset="45">
      <el-tabs v-model="activeName" @tab-change="changeTab">
        <el-tab-pane v-for="item in tabList" :label="item.label" :name="item.value" :key="item.value" />
      </el-tabs>
    </el-affix>
  </div>
</template>

<script lang="ts" setup>
import { toRefs, onBeforeUnmount } from 'vue'
import { useMusicStore } from '@/stores/music'
const { tabList, activeName, changeTab } = toRefs(useMusicStore())

onBeforeUnmount(() => {
  activeName.value = 'selected'
})
</script>

<style lang="less" scoped>
.music-hub-tabs {
  .el-tabs {
    @apply bg-white;
  }
  :deep(.el-tabs__nav-wrap::after) {
    height: 0;
  }
  :deep(.el-affix) {
    width: 100% !important;
    .el-affix--fixed {
      width: 100% !important;
    }
  }
}
</style>
